/*
  学习目标：jsx-条件渲染，类似 v-if
  步骤：
     1. if/esle判断
     2. 三元表达式
     3. 逻辑运算
*/
import React from 'react';
import ReactDOM from 'react-dom';

const bl = false;
//  1. if/esle判断,不能直接写在 jsx 中，需要写在函数中返回
function hello() {
  if (bl) {
    return <div>我是if</div>;
  } else {
    return <div>我是else</div>;
  }
}
const dom = (
  <>
    <div>{hello()}</div>
    {/* 三元表达式 */}
    <div>{bl ? <div>真</div> : <div>假</div>}</div>

    {/* 逻辑运算，一般需要再写一条为假的渲染 */}
    <div>{bl && <div>逻辑为真</div>}</div>
    <div>{!bl && <div>逻辑为假</div>}</div>
  </>
);

ReactDOM.render(dom, document.getElementById('root'));
